<template>
    <el-card shadow="never">
        <template #header>
            <div class="flex justify-between">
                <span class="text-sm">订单统计</span>
                <div>
                    <el-check-tag v-for="(item, index) in options" :key="index" :checked="current == item.value" style="margin-right: 8px" @click="handleChoose(item.value)">{{ item.text }}</el-check-tag>
                </div>
            </div>
        </template>
        <div id="chart" ref="el" style="width: 100%; height: 300px"></div>
    </el-card>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
// import * as echarts from 'echarts'
import echarts from '~/utils/echarts'
import { useResizeObserver } from '@vueuse/core'

import { getStatistics3 } from '~/api/index.js'

const current = ref('week')
const options = [
    {
        text: '近1个月',
        value: 'month',
    },
    {
        text: '近1周',
        value: 'week',
    },
    {
        text: '近24小时',
        value: 'hour',
    },
]

const handleChoose = (type) => {
    current.value = type
    getData()
}

var myChart = null
onMounted(() => {
    var chartDom = document.getElementById('chart')
    if (chartDom) {
        myChart = echarts.init(chartDom)
        getData()
    }
})

onBeforeUnmount(() => {
    if (myChart) echarts.dispose(myChart)
})

function getData() {
    let option = {
        xAxis: {
            type: 'category',
            data: [],
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                data: [],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)',
                },
            },
        ],
    }

    myChart.showLoading()
    getStatistics3(current.value)
        .then((res) => {
            option.xAxis.data = res.x
            option.series[0].data = res.y

            myChart.setOption(option)
        })
        .finally(() => {
            myChart.hideLoading()
        })
}

const el = ref(null)
useResizeObserver(el, (entries) => myChart.resize())
</script>
